<template>
  <div class="list">
    <div class="item" v-for="item in items" :key="item.id">
      <div class="leftbox">
        <img :src="item.src" />
      </div>
      <div class="rightbox">
        <div class="title">{{ item.title }}</div>
        <div class="price">{{ item.price | currency }}</div>
        <div class="price">数量：{{ item.num }}</div>
        <div class="btn"><button @click="del(item.id)">删除</button></div>
      </div>
    </div>
    <div>商品总价：{{total|currency}}</div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";

export default {
  computed:{
      ...mapState({items: (state) => state.shopcart.items,}),  
      ...mapGetters('shopcart',{total:'totalPrice'})
  },
  methods: mapActions("shopcart", ["del"]),
  filters: {
    currency(value) {
      return "￥ " + value;
    },
  },
};
</script>

<style>
.item {
  border-bottom: 1px solid #888;
  display: flex;
  padding: 15px;
}
.leftbox {
  flex: 1;
}
.leftbox > img {
  border: 1px solid #888;
  height: 100px;
}
.rightbox {
  flex: 3;
}
</style>